<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box {
        	width:500px;
        }
        .box_top {
        	width:500px;
        	height:50px;
        	background:dimgray;
        }
        .box_top input {
        	float:right;
        	width:300px;
        	height:20px;
        	margin-top:15px;
        	margin-right:32px;
        	border-radius:5px;
        }
        .box_top b {
        	line-height:50px;
        	margin-left:30px;
        	color:azure;
        }
        .box_bottom {
        	background:lightgray;
        }
        .bot_zz,.bot_wc{
            display: flex;
        }
        .bot_zz span input {
        	width:30px;
        	height:30px;
        	border-radius:50%;
        	border:1px solid transparent;
        	text-align:center;
        }
        .bot_wc span input {
        	width:30px;
        	height:30px;
        	border-radius:50%;
        	border:1px solid transparent;
        	text-align:center;
        }
    </style>
    <div id="app">
        <h3>输入框按回车添加</h3>
        <div class="box">
            <div class="box_top">
                <b>ToDoList</b>
                <input type="text" name="" id="top_inp" value="val" placeholder="添加ToDo" v-model="ipt" @keyup.enter="add">
            </div>
            <div class="box_bottom">
                <div class="bot_zz">
                    <b>正在进行</b>
                    <div class="bot_eveRight" v-for="(item, index) in unfinishList">
                        <div class="bot_eveRight_content">
                            <input type="checkbox" name="" class="bot_eveInp" :value="item.text" @click.prevent="change(item, index)" />
                            <b>{{item.content}}</b>
                        </div>
                        <button class="p" @click="del(item)">删除</button>
                    </div>
                </div>
            
                <div class="bot_wc">
                    <b>已经完成</b>
                    <div class="bot_eveRight" v-for="(item, index) in finishList">
                        <div class="bot_eveRight_content">
                            <input type="checkbox" name="" class="bot_eveInp" checked :value="item.text" @click.prevent="change(item, index)" />
                            <b>{{item.content}}</b>
                        </div>
                        <button class="p" @click="del(item)">删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.config.productionTip = false;

        let vm = new Vue({
            el:"#app",
            data:{
                ipt:"",
                list:[
                    // {
                    //     content:'吃饭',
                    //     checked:false
                    // },
                    // {
                    //     content:'睡觉',
                    //     checked:true
                    // }
                ]
            },
            methods: {
                add(){
                    this.list.push({
                        content:this.ipt,
                        checked:false,
                        // 这是一个唯一值，不会因为你的过滤操作导致这个id发生变化
                        // id 帮助我们找到list中对应的元素
                        id:this.list.length
                    }),
                    this.ipt = ''
                    console.log(this.list)
                },
                change(item) {
                    this.list[item.id].checked = !item.checked
                },
                del(item) {
                    this.list.splice(item.id, 1);
                    // 删除之后，给id这个唯一值重新赋值
                    this.list.forEach((ele, index) => {
                        ele.id = index
                    })
                }
            },
            computed: {
                unfinishList() {
                    return this.list.filter(ele=>ele.checked === false)
                },
                finishList() {
                    return this.list.filter(ele=>ele.checked === true)
                }
            }
        })
    </script>
</body>
</html>